iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
Modern Web

重新認識 Flex 和 Grid系列 第 25

[Day25] grid 容器對齊屬性

  • 分享至 

  • xImage
  •  

如果熟悉 flexbox 的對齊屬性,在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念, justify-* 通常是操控"行",align-* 是操控"列"。能夠使用在 grid 的容器對齊屬性包括:

1.justify-content
2.align-content
3.justify-items
4.align-items


對齊網格

justify-content / align-content

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly | left | right;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
預設: start

和 flexbox 中的使用方式與概念幾乎一樣,在 flexbox 是調整"所有彈性項目的位置";在 grid 中是調整"網格環境的位置",有些要注意的地方是:

1.在 grid 屬性值的名稱中,使用的是 start 和 end;在 flexbox 中則是使用 flex-start 跟 flex-end。
2.在 grid 是以 justify-content 為操控"行",align-content 為操縱"列,操控"網格環境"在"網格容器"中的位置,不會受到網格流向 (grid-auto-flow) 的影響;flexbox 是以主軸和次軸為準,操控所有彈性項目在彈性容器的位置,所以一旦軸向更換就得更換方向。
3.justify-content 另外還有 left 和 right 可以使用,但在 grid 中功能就如同 start 和 end。
4.align-content 有些說明中有 left 和 right,但我試用了之後沒有效果(然後開始懷疑人生?)。

範例

<style>
.container{
  display: inline-grid;
  width: 240px;
  height: 120px;
  grid-auto-flow: column;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px;
  background-color: #a5def5;
  gap: 20px 60px; /*搭配調整看看變化*/
  justify-content: start; /*調整屬性值看看變化*/
}
.item {
  width: 40px;
  height: 40px;
  color: white;
  background-color: #00A0E9;
}
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

簡單的說明屬性值的特性:

  1. start、end、center 是將"網格環境"對齊"網格容器"中的開頭、尾巴、中間。
  2. 查了許多文章都說明 stretch 會將沒有設定網格環境的尺寸,拉伸到貼合網格環境的大小,但實際寫時發現並沒有作用。(但文件也沒特別做說明,於是開始懷疑人生?)
  3. space-between 和 gap 時會忽視 gap 的值,直到 網格項目尺寸 + gap 值總和超出網格容器,因為是以流向的開頭開始計算,超出網格容器的方向會是由網格容器的尾巴凸出。
  4. space-around 在遇到 gap 時,計算方式會以完成這個屬性之後,剩下的會以 gap / 網格項目兩側的空間數量(網格項目 * 2) 來向兩側增加尺寸。因為是對齊流向的中間,超出容器時是以兩側平均凸出容器。
  5. space-evenly 在遇到 gap 時,計算方式會以完成這個屬性之後,剩下的會以 gap / 空間數量(網格項目 + 1) 來向兩側增加尺寸。超出容器的方式也是對其中線以兩側平均凸出容器。

justify-items / align-items

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
預設: stretch

和 flexbox 中的使用方式與概念幾乎一樣,在 flexbox 是調整"每個彈性項目的位置";在 grid 中是調整"網格項目在網格區域中的位置",有些要注意的地方是:

1.在 grid 屬性值的名稱中,使用的是 start 和 end;在 flexbox 中則是使用 flex-start 跟 flex-end。
2.grid 中不像 flexbox 有 baseline 這個屬性值的概念。
3.如果你的網格項目跟你的網格區域一樣大,你將看不出變化。

範例

<style>
.container{
  display: inline-grid;
  width: 360px;
  height: 200px;
  grid-auto-flow: row;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px;
  background-color: #a5def5;
  gap: 0px 0px;
  align-items: baseline;
}
.item {
  width: 40px;
  height: 40px;
  color: white;
  background-color: #00A0E9;
}
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

items 的屬性值相對上簡單許多:

1.justify-items 是操控彈性項目的"行"向位置,align-items 是操控彈性項目的"列"向位置。
2.start、end、center 是將"網格環境"對齊"網格容器"中的開頭、尾巴、中間。
3.stretch 是將沒有設定尺寸的網格項目拉伸到和網格區域(如果你的網格項目只佔一格的話就是網格單元格)一樣大,也是預設。如果網格項目有設定尺寸,stretch 會沒有效果,因為你有設定尺寸它就不會拉伸;而有設定尺寸時,因為對齊的方向都是以流向的開始為開頭,可能會有預設是 start 的錯覺。


資料來源:


上一篇
[Day24] grid gap相關屬性
下一篇
[Day26] Grid 網格項目
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言